What is Life Essenz?

Life Essenz is a brand that sells essential oils and fragrances and supports affiliate marketing programs for low-socioeconomic students to help them save money for their education.

Client

Life Essenz

My Role
 

UX Designer

Tools Used

Figma, FigJam, Slack, Canva, Zoom, Google workspace

My Responsibilities

• Wireframing
• Prototyping
• Design System
• User Interviews
• Usability Testing
• Cross-functional collaboration
• Information Architecture

Our Team

UX Design Team of 5

Timeline

June 2024 - August 2024

Problem Statement

Users need an intuitive and easy-to-use platform that empowers them to sell items and earn commissions, ultimately helping them save money.

The client seeks to combine the strengths of e-commerce and non-profit platforms to create a unique solution for students looking to achieve financial savings.

Main Goals

• Communicate the benefits and details of the affiliate program to drive product purchases and affiliate sign-ups.

• Ensure the design aligns with the brand's identity and appeals to the target audience.

• Migrate the e-commerce website from WordPress to the Shopify platform.

Heuristic evaluation

To make more informed choices that align with user needs and expectations, I decided to conduct a heuristic evaluation of the existing e-commerce website.

I documented all usability issues and their resolutions using Jakob Nielsen's 10 general principles for interaction design. Based on these 10 usability heuristics, I divided all issues by severity into critical, moderate, and cosmetic. This helped me understand common issues and areas for improvement.

Shopify vs. WebFlow

During the heuristic evaluation, I understood that the existing website currently built on WordPress needed to be migrated to the platform with more functionality for the e-commerce website to make it more efficient and scalable in the future.

I considered several platforms and ended up choosing between Shopify and WebFlow. Each platform had its strengths, so the best choice depended on the client's needs, including the scale of the business, the budget, and the level of customization the client required.

I did a competitive analysis and analyzed key features: functionality, responsive design, pricing, SEO and marketing and payment options.

Who is our user?

The users of an e-commerce platform that helps students earn and save money can be diverse, but they generally share some common characteristics. Here’s a breakdown of potential user profiles.

• Customer user persona represents a wellness-conscious, community-minded consumer who values high-quality, natural products and is looking for an e-commerce experience that aligns with their values of health and sustainability, offering them not only excellent products but also opportunities to make a positive impact.
• Student user persona represents a young, budget-conscious, and environmentally aware person seeking extra income through an easy-to-use platform that aligns with their busy lifestyle and financial goals. 
• Parent user persona represents a mindful parent who values education, safety, and sustainability. They support their children’s use of the platform as a way to teach them important life skills, such as financial responsibility and independence. 

What about ideation?

Another step in designing a new website was creating a mood board for our client's e-commerce store that sells essential oils, diffusers, candles, and fragrances to visually communicate the intended aesthetic, tone, and overall feel of the site. 

I created two different versions of the mood boards, one for the e-store and another one for the affiliate program. They served as a visual reference that aligns the design team, stakeholders, and clients on the creative direction before the actual design work begins.

The main words I used to describe Life Essenz brand were relaxing, sustainable, natural, and artisanal. I used neutral and earthy tones to create calm and natural aestetics.

On the other hand, we had a Life Beautified non-profit organization that should empower students to earn and save. Power words I used to inspire copy creation were empowering, rewarding, reliable, supportive.

Information Architecture & Sitemap

One of the most fundamental steps in developing the MVP was creating the sitemap that ensures the site is well-organized and optimized for users. It improved communication and coordination with stakeholders and inside our team, ensuring that everyone was aligned on the website’s structure and goals.

Creating a sitemap allowed me to see the entire structure of the website and ensure that important pages had not been overlooked and there was a logical flow to the user journey.

Wireframing

After creating the website’s structure, I started working on low-fidelity wireframes for the Home and About Us pages with a clear understanding of the hierarchy of elements. These initial wireframes focused on structuring core layouts, defining key interactions, and mapping out user flows without the distraction of visual design elements.

By keeping the designs simple, I was able to rapidly iterate based on feedback. This phase helped me in validating early concepts before moving into high-fidelity prototyping.

High-fidelity interactive prototype

As the design progressed, I created a high-fidelity interactive prototype using Figma, incorporating visual hierarchy, accessibility considerations, and micro-interactions. This prototype was an important tool to prepare for usability testing, allowing for iterative improvements before development.

Usability testing

To ensure the prototype effectively met user needs, our team carefully planned the usability testing process. We defined clear objectives, focusing on key user flows and potential pain points. Next, we created a test plan outlining the tasks participants would complete, such as navigating the site, finding the Return & Refund Policy, and interacting with key features like completing the purchase. We selected participants who matched the target audience and decided on a mix of remote usability testing and user interviews to gather insights. We aimed to collect qualitative and quantitative data, which would guide the next round of design improvements.

Demographics

• Ages 18 - 44 yrs

• U.S. residents

• Frequent online shoppers

• Familiar or experienced with affiliate marketing

Goal of the test

The goal of test was to validate our assumptions and test the design for its usability. This would help us give real behavioral insights into how the user actually use the website. Additionally, we were able to test the success rate of the various tasks.

This helped reiterate the designs as per the results that were acquired from the test.

Method

Remote usability testing and user interviews has been conducted with 7 users. The sessions have been recorded to analyze and observe. The users were requested to share their screens to observe hovering of the mouse and clicking on the tabs. We ask the users to use the method of ‘Think Out Loud’ where they say aloud their thoughts at every step of the way.

Our team created a detailed testing template outlining key objectives, tasks, and evaluation criteria. The template included a brief introduction to set expectations for participants, followed by a series of realistic tasks designed to assess navigation, task efficiency, and overall user experience. We also incorporated space for user observations and qualitative feedback to capture valuable insights. You can check the user interview template here:

Research findings

After conducting usability testing, we analyzed the feedback and identified key patterns in user behavior. The findings revealed that users navigated the site with ease but encountered minor friction in finding the Return policy. Participants appreciated the clean layout and intuitive design but suggested improvements in the product listing page and detailed description of the products. These findings informed the next iteration of the design.

Here are some key findings and insights:

Iterating on the design

Based on the research findings, we developed a set of recommendations:

• Improve the visibility of the Return & Refund Page.

• Provide more instructions on how to use the affiliate code on the checkout page.

• Provide more information on qualifications of being an associate.

What have I learned?

• After conducting usability testing, it was clear to me that the design should be improved after users feedback. I learned that the assumptions should always be tested with real users! 
• During this project, I dealt with the ambiguity a lot of times, and I learned how to adapt to the changing goals and how to deal with the uncertainty while waiting for the feedback from stakeholders.
• I developed stronger communication and collaboration skills while gathering feedback from users and working with the product team, developers, and other designers.

Thank you for reading!

Check out my other case studies here:

Enhancing User Onboarding Experience

Creating Information Architecture for the Mentorship Platform